import React, { memo, useState, useEffect } from "react";
import { View } from "@tarojs/components";
import { COLORS } from "@/utils/local-data";
import TrendLine from "../TrendLine"
import { formatNumber } from "@/utils/fomatter";
import { useSelector } from "react-redux"



import './index.scss'

const NetWorthTrend = (props) => {

  const { reportDetail } = useSelector(state => state.obsPool)

  const [productList, setProductList] = useState<object>([])
  const [seriesData, setSeriesData] = useState<any>([])
  useEffect(() => {
    let result = [
      ...reportDetail.otherList
    ]
    setProductList([...result])
  }, [reportDetail])

  const getData = (data) => {
    setSeriesData(data.seriesData)
  }
  const getValue = (index) => {
    if (seriesData.length) {
      let fundName = productList[index].fundName
      let data = seriesData.find(item => item.seriesName == fundName)
      return data ? formatNumber(data.data[1], 2) : '-'
    }
    let data = productList[index].yieldRate.split(",")
    return formatNumber(data[data.length - 1] * 100, 2)
  }

  const setColor = (value) => {
    if (value > 0) {
      return 'red'
    } else if (value < 0) {
      return 'gre'
    }
  }
  return (
    <View className='body-card'>
      <View className='card-name text1 black'>
        <View className='title'> 近一年净值走势 <View className='gray4'>对数坐标</View></View>
      </View>
      <View className='trend-list'>
        {
          productList.map((item, index) => {
            return (
              <View className='data-comp' style={{ width: productList?.length >= 4 ? '25%' : '', flex: productList?.length > 4 ? 'none' : 1 }} key={index}>
                <View style={{ borderLeft: `3px solid ${COLORS[index]}` }} className={getValue(index) != '-' ? setColor(getValue(index)) : ''}>{getValue(index) != '-' ? getValue(index) + '%' : '-'}</View>
                <View>{item.fundName}</View>
              </View>
            )
          })
        }

      </View>
      <View className='line-content'>
        <TrendLine reportDetail={reportDetail} getData={getData} />
      </View>

    </View>




  );
};

export default memo(NetWorthTrend);
